<template>
	<view class="wrapper code">
		<!--表单-->
		<view class="form">
			<uni-forms
				:modelValue="form"
				ref="formRef"
				:label-width="80">
				<uni-forms-item
					v-if="keyName === 'nickName'"
					:rules="[{required: true,errorMessage: `请输入昵称`}]"
					label="昵称" name="nickName" required >
					<uni-easyinput
						type="nickname"
						:inputBorder="false"
						primaryColor="#e3230e"
						maxlength="20"
						
						v-model="form.nickName"
						@bindnicknamereview="bindnicknamereview"
						placeholder="请输入昵称" />
				</uni-forms-item>
				<uni-forms-item
					v-else-if="keyName === 'name'"
					:rules="[{required: true,errorMessage: `请输入姓名`}]"
					label="姓名" name="name" required>
					<uni-easyinput
						type="text"
						:inputBorder="false"
						primaryColor="#e3230e"
						maxlength="20"
						v-model="form.name"
						placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item
					v-else-if="keyName === 'phone'"
					:rules="[{
						required: true,
						errorMessage: `请输入联系电话`
					},{
						validateFunction: function (rule,value,data,callback) {
							if (!test.mobile(value)) {
								callback('请输入正确联系电话')
							}
							return true
						}
					}]"
					label="联系电话" name="phone" required>
					<uni-easyinput
						type="text"
						:inputBorder="false"
						primaryColor="#e3230e"
						maxlength="11"
						v-model="form.phone"
						placeholder="请输入联系电话" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="ty-button ty-button-confirm form-submit" :disabled="isSubmit" :loading="isSubmit" @click="submit">保存</button>
	</view>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { perfectEdit } from "@/api/app_api/user"
import { throttle, debounce, test, sleep } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const keyName = ref('')
	const label = ref('')
	onLoad((options) => {
		if (options.key) {
			keyName.value = options.key
			switch (options.key) {
				case 'nickName':
					label.value = '昵称'
					break
				case 'name':
					label.value = '姓名'
					break
				case 'phone':
					label.value = '联系电话'
					break
			}
			form.value[keyName.value] = userStore?.user?.[keyName.value] || ''
			uni.setNavigationBarTitle({
				title: `编辑${label.value}`
			})
		}
	})
	
	// 表单
	const formRef = ref(null)
	const form = ref({})
	// 表单验证
	const rules = ref({})
	
	watch(() => userStore.user, (nval, oval) => {
		if(nval) {
			form.value[keyName.value] = userStore?.user?.[keyName.value] || ''
		}
	})
	
	// 昵称
	const bindnicknamereview = (e) => {
		console.log(e)
	}
	
	// 表单提交
	const isSubmit = ref(false)
	const submit = () => {
		formRef.value.validate().then(formRes => {
			isSubmit.value = true
			const params = {
				...form.value
			}
			perfectEdit(params).then(res => {
				uni.$u.toast(res.msg)
				uni.$u.sleep(1000).then(() => {
					isSubmit.value = false
					uni.navigateBack({
						delta: 1
					})
				})
			}).catch(err => {
				isSubmit.value = false
			})
		})
	}
	
	onReady(() => {
		formRef.value.setRules(rules.value)
	})
	
</script>

<style lang="scss">
	.code {
		padding: 20rpx;
	}
	.form {
		padding: 0rpx 32rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		&-submit {
			height: $button-height;
			padding: 0;
			margin: 0;
			margin-top: 40rpx;
			font-size: 32rpx;
		}
	}
</style>
